<template>
	<view class="breadcrumb">
		<view class="breaditem" v-for="(item,index) in routes" :key="index" @click="toPage(item.to)">
			<text>{{item.name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				routes: [{
					to: '/pages/index/index',
					name: this.$t('index.sy')
				}]
			}
		},
		props: {
			name: {
				typeof: String,
				default () {
					return ''
				}
			}
		},
		created() {
			var that = this
			var pages = getCurrentPages()
			var crrentRoute = pages[pages.length - 1].route
			that.routes.push({
				to: crrentRoute,
				name: that.name
			})
		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.breadcrumb {
		display: flex;
		align-items: center;

		.breaditem {
			position: relative;
			padding: 10px 5px;
			padding-right: 15px;

			text {
				cursor: pointer;
			}

			&:not(:last-child)::after {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(0, -50%);
				content: '>';
				font-size: 14px;
			}
		}
	}
</style>